<template>
  <div class="common-layout">
    <el-container>
      <el-container>
        <el-aside width="200px"><NavMenu></NavMenu></el-aside>
        <el-container>
          <el-header height="60px"><Header></Header></el-header>
            <el-main>
              <el-card class="box-card" shadow="hover">
                <template #header>
                  <div class="card-header">
                    <el-breadcrumb separator="/">
                      <el-breadcrumb-item :to="{ path: '/notice' }">通知管理</el-breadcrumb-item>
                      <el-breadcrumb-item>修改通知</el-breadcrumb-item>
                    </el-breadcrumb>
                  </div>
                </template>
                  <el-form
                    label-position="top"
                    label-width="100px"
                    :model="formNoticeEdit"
                    style="max-width: 460px"
                  >
                  <div class="text-basic">
                    <el-form-item label="标题">
                      <el-input v-model="formNoticeEdit.title" placeholder="请输入标题"/>
                    </el-form-item>
                    <el-form-item label="类型" style="margin-left: 40px;">
                      <el-select v-model="formNoticeEdit.type" placeholder="选择类型" style="width: 120px">
                        <el-option value="社区通知"/>
                        <el-option value="内部通知" />
                      </el-select>
                    </el-form-item>
                    <el-button
                      class="edit-noticebtn"
                      type="primary"
                      @click="editNotice">
                      <el-icon class="icon-button"><plus /></el-icon>
                      <p>修改</p>
                    </el-button>
                  </div>
                  <div class="text-content">
                    <el-form-item label="内容">
                      <el-input
                        v-model="formNoticeEdit.content"
                        :rows="12"
                        type="textarea"
                        placeholder="通知内容"
                      />
                    </el-form-item>
                  </div>
                </el-form>
            </el-card>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import NavMenu from '@/components/NavMenu.vue'
import Header from '@/components/Header.vue'
import { ElMessage } from "element-plus";

export default {
  name: 'HomeView',
  components: {
    NavMenu,
    Header
  },
  data() {
    return {
        id:'',
        formNoticeEdit: {
            title: '',
            type: '',
            content: '',
        },
    }
  },
  methods: {
    //初始化
    initNoticeInfo(){
		this.formNoticeEdit=JSON.parse(this.$route.params.data)
		this.id=JSON.parse(this.$route.params.data).id;
    },
    //修改通知
    editNotice(){
		var that = this;
    console.log(this.formNoticeEdit);
      this.axios
      .post("/notice/update", this.formNoticeEdit)
      .then(function(){
          ElMessage({type: 'success', message: "修改成功"});
          that.$router.push({name: "notice"});
      })
      .catch(function (error) {
          console.log(error);
      });

    }
  },
  mounted(){
    this.initNoticeInfo();
  }
}
</script>

<style scoped>
:deep(.el-header) { 
  padding: 0;
}
.box-card{
  height: 500px;
  overflow-y:auto;
}
.el-breadcrumb-item{
    float: left;
    line-height: 0px;
    color: var(--el-text-color-regular);
}
.text-basic{
  display: flex;
  width: 500px;
}
.edit-noticebtn{
  margin-top: 30px;
  margin-left: 40px;
}
.text-content{
  width: 900px;
}
</style>
